<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<ui:composition template="/WEB-INF/qTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"

                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="title">Edit Planned Trip Page</ui:define>
    <ui:define name="content">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <div id="main">
            <script>

                $(document).ready(function() {


                    $("#backButton").click(function() {
                        $(".screen2").hide();
                        $(".screen1").show();

                        return false;
                    });
                    var i = 1;
                    $("#addWayPoint").click(function() {


                        $("#wayPointBox").append('<br /><input type="text" placeholder="Enter Address/Name/Coordinates..." name="waypoint" id="waypoints" />\
                                                    <input type="button" class="button" value="X" name="removeButton" id="removeButton"/>')
                        i++;
                        return false;
                    });
                    $('.removeButton').click(function() {
                        $(this).prev().remove();
                        $(this).remove();
                    });
                });

            </script>
            <div id="indexLeftColumn" >

                <ul> 
                    <li><a href="qCurrentTrip.xhtml">Current Trip</a></li>
                    <li><a href="qMyTrips.xhtml">My Trips</a></li> 
                    <li><a href="planTripInfo.xhtml">Plan A Trip</a></li>
                    <li><a href="qUploadPhotoList.xhtml">My Media</a></li>
                </ul> 
            </div>
            <div id="indexRightColumn">
                <form id="editTripForm" name="editTripForm" method="post" action="EditTrip">
                    <div class="screen1">
                        <input type="hidden" name="tripId" value="#{EditTripBean.tripId}" /> 
                        <table style="padding-top: 10px;text-align: left;">
                            <tr>
                                <td>
                                    <table style="padding-top: 10px;text-align: left;">
                                        <tr>

                                            <td style=" text-align: left">

                                            </td>

                                        </tr>
                                        <tr>
                                            <td><label>Trip Name: </label></td>
                                            <td><input type="text" value="#{EditTripBean.name}" name="tripName" size="40" /></td>
                                        </tr>

                                        <tr>
                                            <td><label>Start Date: </label> </td>
                                            <td><input type="date" value="#{EditTripBean.startDate.year+1900}-#{EditTripBean.startDate.month+1}-#{EditTripBean.startDate.date}" name="startDate" id="startDate" /> </td>
                                        </tr>
                                        <tr>
                                            <td><label>End Date: </label></td>
                                            <td><input type="date" name="endDate" value="#{EditTripBean.endDate.year+1900}-#{EditTripBean.endDate.month+1}-#{EditTripBean.endDate.date}" /></td>
                                        </tr>
                                        <tr>
                                            <td> <label>Start Location: </label></td>
                                            <td> <input type="text" name="startLocation" id="startLocation" value="#{EditTripBean.startLocation}" /> </td>
                                        </tr>
                                        <tr>
                                            <td><label>Waypoints: </label>  </td>
                                            <td>
                                                <h:dataTable value="#{EditTripBean.waypoints}" var="w"
                                                             styleClass="order-table"
                                                             headerClass="order-table-header"
                                                             rowClasses="order-table-odd-row,order-table-even-row"
                                                             >
                                                    <h:column>
                                                        <input type="text" value="#{w.name}" name="waypoint" id="waypoints" />
                                                        <input type="button" class="button removeButton" value="X" name="removeButton" id="removeButton" />
                                                    </h:column>
                                                </h:dataTable>
                                                <div id="wayPointBox">
                                                    <input type="text" placeholder="Enter Address/Name/Coordinates..." name="waypoint" id="waypoints" />
                                                </div>
                                                <input  class="button" type="button" id="addWayPoint" value="Add Another" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label>Destination: </label> </td>
                                            <td><input type="text"  name="endLocation" value="#{EditTripBean.endLocation}" id="endLocation"/></td>
                                        </tr>
                                        <tr>
                                            <td><label>Do you wish to make this trip public? </label> </td>
                                            <c:if test="#{EditTripBean.isPublic == 1}">
                                                <td><input name="isPublic" type="checkbox" checked="checked" /></td>
                                            </c:if>
                                            <c:if test="#{EditTripBean.isPublic == 0}">
                                                <td><input name="isPublic" type="checkbox" /></td>
                                            </c:if>
                                        </tr>
                                        <tr>
                                            <td id="hiddenD">


                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right" colspan="2">
                                                <input class="button" type="submit" id="saveMyTrip" name="submitButton" value="Save" style="float: right;"/>
                                                <input class="button" onclick="reCalcRoute();" type="button" id="showMyTrip" value="Update Map" style="float: right;"/>
                                                <c:if test="#{CurrentTripTableBean.tripName==null}">
                                                    <input class="button" type="submit" id="takeTrip" name="takeTrip" value="Take Trip" style="float: right;" formaction="TakeTrip" />
                                                </c:if>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right" colspan="2">
                                                <a href="qDirections.xhtml?#{EditTripBean.tripId}" id="directions" name="directions" style="float: right; font-size: 12px;">Get Directions</a>
                                            </td>
                                        </tr>
                                    </table> 
                                </td>
                                <td>
                                    <div id="map_canvas" style="float:left;width:600px;height:350px;"></div>
                                </td>
                            </tr>

                        </table>

                    </div>

                    <div class="screen2" style="display:none; width: 100%;height:100%">


                    </div>

                </form>

            </div>
        </div>
    </ui:define>
</ui:composition>